.item {
  @apply px-4 py-5 rounded-2xl relative cursor-default transition-all;
  background-color: #f2f7ff;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;

  &::before {
    content: '';
    @apply absolute w-full h-full rounded-2xl -bottom-1 left-0 transition-all;
    background-color: #b7c5f3;
    z-index: -1;
    box-shadow: 0 10px 20px rgba(37, 12, 171, 0.3);
  }

  &.color_1::after {
    background-image: linear-gradient(to top, #4978FA, #3A62D3);
  }

  &.color_2::after {
    background-image: linear-gradient(to top, #65CAEF, #4CA6C4);
  }

  &.color_3::after {
    background-image: linear-gradient(to top, #746FD6, #5D58B4);
  }

  &.color_4::after {
    background-image: linear-gradient(to top, #00D098, #00A97B);
  }

  &::after {
    content: '';
    @apply absolute w-5 rounded-tl-xl rounded-bl-xl right-0 transition-all;
    height: 5.3rem;
    background-color: #b7c5f3;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    box-shadow: inset 5px 4px 7px rgba(0, 0, 0, 0.15);
  }

  .icon {
    @apply text-stone-700 mb-2 text-2xl;
  }

  .name {
    @apply font-light mb-1.5 opacity-70;
  }

  .value {
    @apply text-lg font-medium;
  }
}